<template>
  <div class="blog-management">
    <!-- 页面标题区域 -->
    <div class="page-header glass-effect">
      <div class="header-content">
        <h1>博客管理</h1>
        <div class="header-actions">
          <!-- 移动端显示切换树的按钮 -->
          <el-button 
            v-if="isMobile"
            type="text"
            class="tree-toggle-btn"
            @click="toggleMobileTree"
          >
            <i class="fas fa-sitemap"></i>
            空间结构
          </el-button>
          <el-button type="primary" class="create-btn" @click="gotoCreateBlog">
            <i class="fas fa-plus"></i>
            创建博客
          </el-button>
        </div>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧空间树 -->
      <div 
        class="space-tree-section glass-effect"
        :class="{
          'mobile-tree': isMobile,
          'show-mobile-tree': showMobileTree
        }"
      >
        <div class="tree-header">
          <div class="tree-title">
            <i class="fas fa-sitemap"></i>
            <span>空间结构</span>
          </div>
          <!-- 移动端显示关闭按钮 -->
          <el-button 
            v-if="isMobile"
            type="text"
            class="close-tree-btn"
            @click="toggleMobileTree"
          >
            <i class="el-icon-close"></i>
          </el-button>
        </div>
        <div class="tree-container">
          <el-tree
            :data="spaceTreeData"
            :props="treeProps"
            @node-click="handleNodeClick"
            node-key="spaceId"
            :highlight-current="true"
            :current-node-key="selectedSpaceId"
            :default-expanded-keys="expandedKeys"
            @node-expand="handleNodeExpand"
            @node-collapse="handleNodeCollapse"
            class="custom-tree"
            ref="spaceTree"
          >
            <template #default="{ data }">
              <div class="custom-tree-node" :class="{ 'is-active': data.spaceId === selectedSpaceId }">
                <div class="node-content">
                  <i class="fas fa-folder" :class="{ 'folder-active': data.spaceId === selectedSpaceId }"></i>
                  <span>{{ data.spaceName }}</span>
                  <span class="space-count" v-if="data.articleCount">
                    {{ data.articleCount }}
                  </span>
                </div>
                <div class="node-actions" v-if="data.isEdit === '1' || data.isDelete === '1'">
                  <el-tooltip content="编辑" placement="top" v-if="data.isEdit === '1'">
                    <i class="el-icon-edit" @click.stop="handleSpaceCommand('edit', data)"></i>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top" v-if="data.isDelete === '1'">
                    <i class="el-icon-delete" @click.stop="handleSpaceCommand('delete', data)"></i>
                  </el-tooltip>
                  <el-tooltip content="添加子空间" placement="top" v-if="data.isEdit === '1'">
                    <i class="el-icon-plus" @click.stop="handleSpaceCommand('create', data)"></i>
                  </el-tooltip>
                </div>
              </div>
            </template>
          </el-tree>
        </div>
      </div>

      <!-- 右侧博客列表 -->
      <div class="blog-list-section glass-effect">
        <div class="blog-table">
          <el-table 
            :data="blogs" 
            style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa' }"
          >
            <el-table-column type="expand">
              <template #default="props">
                <div class="blog-detail-expand">
                  <div class="detail-item">
                    <i class="fas fa-clock"></i>
                    <span>发布时间：{{ props.row.publishedDate }}</span>
                  </div>
                  <div class="detail-item">
                    <i class="fas fa-edit"></i>
                    <span>原创：{{ formatOriginal(props.row) }}</span>
                  </div>
                  <div class="detail-item">
                    <i class="fas fa-language"></i>
                    <span>语言版本：{{ formatLanguageVersion(props.row) }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column 
              prop="title" 
              label="标题"
            >
              <template #default="scope">
                <div class="blog-title">
                  <i class="fas fa-file-alt"></i>
                  <span>{{ scope.row.title }}</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="state"
              label="状态"
              width="120"
            >
              <template #default="scope">
                <div class="status-tag" :class="getStatusClass(scope.row.state)">
                  {{ formatStatus(scope.row) }}
                </div>
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              width="200"
            >
              <template #default="scope">
                <div class="action-buttons">
                  <el-tooltip 
                    content="编辑" 
                    placement="top"
                    v-if="scope.row.state!== '0'"
                  >
                    <el-button 
                      type="primary" 
                      icon="el-icon-edit" 
                      circle 
                      size="small"
                      @click="editBlog(scope.row)"
                    ></el-button>
                  </el-tooltip>

                  <el-tooltip 
                    content="删除" 
                    placement="top"
                  >
                    <el-button 
                      type="danger" 
                      icon="el-icon-delete" 
                      circle 
                      size="small"
                      @click="deleteBlog(scope.row.articleId)"
                    ></el-button>
                  </el-tooltip>

                  <el-tooltip 
                    content="提交审核" 
                    placement="top"
                  >
                    <el-button 
                      type="success" 
                      icon="el-icon-check" 
                      circle 
                      size="small"
                      @click="submitForReview(scope.row.articleId)"
                    ></el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 添加创建/编辑空间的对话框 -->
    <el-dialog
      :title="dialogType === 'create' ? '创建空间' : '编辑空间'"
      :visible.sync="showSpaceDialog"
      width="30%"
      :close-on-click-modal="false"
      @closed="handleDialogClose"
    >
      <el-form :model="spaceForm" ref="spaceForm" :rules="spaceRules">
        <el-form-item label="空间名称" prop="spaceName">
          <el-input v-model="spaceForm.spaceName" placeholder="请输入空间名称"></el-input>
        </el-form-item>
        <el-form-item label="上级空间" v-if="dialogType === 'create'">
          <el-input 
            v-model="spaceForm.parentName" 
            disabled 
            placeholder="无"
          ></el-input>
        </el-form-item>
        <el-form-item label="可见范围" prop="visibilityScope">
          <el-select 
            v-model="spaceForm.visibilityScope" 
            placeholder="请选择可见范围"
            class="visibility-select"
          >
            <el-option
              v-for="option in visibilityOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            >
              <i :class="option.icon"></i>
              <span>{{ option.label }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showSpaceDialog = false">取消</el-button>
        <el-button type="primary" @click="submitSpaceForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "BlogManagement",
  data() {
    // 自定义验证规则
    const validateSpaceName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入空间名称'));
      } else if (value.length < 2 || value.length > 20) {
        callback(new Error('长度在 2 到 20 个字符'));
      } else if (this.dialogType === 'create' && 
                 this.checkDuplicateName(value, this.spaceForm.parentId)) {
        callback(new Error('该空间下已存在同名空间'));
      } else if (this.dialogType === 'edit' && 
                 this.checkDuplicateName(value, this.spaceForm.parentId) && 
                 value !== this.originalSpaceName) {
        callback(new Error('该空间下已存在同名空间'));
      } else {
        callback();
      }
    };

    return {
      blogs: [], // 存储博客列表
      spaceTreeData: [], // 存储空间树数据
      treeProps: {
        children: "children",
        label: "spaceName",
      },
      selectedSpaceId: null, // 用于存储当前选中的空间节点
      showSpaceDialog: false, // 用于控制创建/编辑空间的对话框显示
      dialogType: 'create', // 用于存储当前操作的对话框类型
      spaceForm: {
        spaceName: '', // 用于存储空间名称
        parentName: '', // 用于存储上级空间名称
        visibilityScope: 'public' // 默认公开
      }, // 用于存储空间表单数据
      spaceRules: {
        spaceName: [
          { validator: validateSpaceName, trigger: 'blur' }
        ],
      }, // 用于存储空间表单验证规则
      visibilityOptions: [
        { value: 'public', label: '公开', icon: 'fas fa-globe' },
        { value: 'private', label: '私有', icon: 'fas fa-lock' },
        { value: 'group', label: '团队', icon: 'fas fa-users' }
      ],
      expandedKeys: [],
      originalSpaceName: '', // 用于编辑时记录原始名称
      showMobileTree: false, // 控制移动端树的显示
      isMobile: false, // 是否为移动端
    };
  },
  methods: {
    formatOriginal(row) {
      return row.isOriginal ? "是" : "否";
    },
    formatLanguageVersion(row) {
      return row.language === "zh" ? "中文" : "英文";
    },
    formatStatus(row) {
      const statusMap = {
        "1": "已发布",
        "0": "草稿",
        "-1": "已删除",
        "2": "待审核"
      };
      return statusMap[row.state] || "未知状态";
    },
    getStatusClass(state) {
      const classMap = {
        "1": "status-published",
        "0": "status-draft",
        "-1": "status-deleted",
        "2": "status-pending"
      };
      return classMap[state] || "";
    },
    editBlog(blog) {
      const language = blog.language === "zh" ? "ZH-CN" : "EN-US";
      this.$router.push(`doc/article/edit/${blog.articleId}/${language}`);
    },
    async deleteBlog(blogId) {
      try {
        await this.$confirm("确定要删除这篇博客吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        
        const response = await axios.delete(`/api/blogs/${blogId}`);
        if (response.data.code === 200) {
          this.fetchBlogsBySpaceId();
          this.$message.success("删除成功");
        }
      } catch (error) {
        if (error !== "cancel") {
          console.error("删除博客失败:", error);
        }
      }
    },
    async submitForReview(blogId) {
      try {
        await this.$confirm("确定要提交审核吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        
        const response = await axios.post(`/api/blogs/submitReview/${blogId}`);
        if (response.data.code === 200) {
          this.fetchBlogsBySpaceId();
          this.$message.success("提交审核成功");
        }
      } catch (error) {
        if (error !== "cancel") {
          console.error("提交审核失败:", error);
        }
      }
    },
    async fetchSpaces() {
      try {
        const response = await axios.get(`/api/system/user/blog/personSpace`);
        if (response.data.code === 200) {
          const currentExpandedKeys = [...this.expandedKeys]; // 保存当前展开状态
          this.spaceTreeData = this.formatSpaces(response.data.data);
          
          // 如果有选中的节点，确保其父节点都展开
          if (this.selectedSpaceId) {
            const parentIds = this.getParentIds(this.spaceTreeData, this.selectedSpaceId);
            this.expandedKeys = [...new Set([...currentExpandedKeys, ...parentIds])];
          } else {
            this.expandedKeys = currentExpandedKeys;
          }
        }
      } catch (error) {
        console.error("获取空间失败:", error);
      }
    },
    formatSpaces(spaceData) {
      const map = {};
      const tree = [];

      spaceData.forEach((space) => {
        map[space.spaceId] = { ...space, children: [] };
      });

      spaceData.forEach((space) => {
        if (space.parentId === null) {
          tree.push(map[space.spaceId]);
        } else if (map[space.parentId]) {
          map[space.parentId].children.push(map[space.spaceId]);
        }
      });

      return tree;
    },
    async handleNodeClick(node) {
      this.selectedSpaceId = node.spaceId;
      const authorId = localStorage.getItem("account");
      this.$router.push({
        name: "blog",
        query: { 
          spaceId: this.selectedSpaceId,
          authorId: authorId 
        } 
      });
      
      await this.fetchBlogsBySpaceId();
    },
    async fetchBlogsBySpaceId() {
      const { spaceId, authorId } = this.$route.query;
      this.selectedSpaceId = spaceId;
      try {
        const response = await axios.get(`/api/system/doc/${authorId}`, {
          params: { spaceId }
        });
        if (response.data.code === 200) {
          this.blogs = response.data.data;
        }
      } catch (error) {
        console.error('获取博客失败:', error);
      }
    },
    gotoCreateBlog() {
      this.$router.push({
        name: "createBlog",
        query: { spaceId: this.selectedSpaceId }
      });
    },
    showCreateSpaceDialog() {
      this.dialogType = 'create';
      this.showSpaceDialog = true;
    },
    handleSpaceCommand(command, data) {
      switch (command) {
        case 'create':
          this.dialogType = 'create';
          this.spaceForm = {
            spaceName: '',
            parentId: data.spaceId,
            visibilityScope: 'public'
          };
          this.originalSpaceName = '';
          this.showSpaceDialog = true;
          break;
        case 'edit':
          if (data.isEdit !== '1') {
            this.$message.warning('该空间不允许编辑');
            return;
          }
          this.dialogType = 'edit';
          this.spaceForm = {
            spaceName: data.spaceName,
            spaceId: data.spaceId,
            parentId: data.parentId,
            visibilityScope: data.visibilityScope || 'public'
          };
          this.originalSpaceName = data.spaceName;
          this.showSpaceDialog = true;
          break;
        case 'delete':
          if (data.isDelete !== '1') {
            this.$message.warning('该空间不允许删除');
            return;
          }
          this.deleteSpace(data.spaceId);
          break;
      }
    },
    async deleteSpace(spaceId) {
      const space = this.spaceTreeData.find(s => s.spaceId === spaceId);
      if (space && space.isDelete !== '1') {
        this.$message.warning('该空间不允许删除');
        return;
      }

      try {
        await this.$confirm("确定要删除这个空间吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        
        const response = await axios.post(`/api/system/user/blog/space/${spaceId}`);
        if (response.data.code === 200) {
          this.fetchSpaces();
          this.$message.success("删除成功");
        }
        if(response.data.code === 40001){
          this.$message.error(response.data.message || "删除空间失败");
        }
        if(response.data.code === 40002){
          this.$message.error(response.data.message || "删除空间失败");
        }

      } catch (error) {
        if (error !== "cancel") {
          console.error("删除空间失败:", error);
        }
      }
    },
    submitSpaceForm() {
      this.$refs.spaceForm.validate(async (valid) => {
        if (valid) {
          // 再次检查重名（防止并发操作）
          if (this.checkDuplicateName(this.spaceForm.spaceName, this.spaceForm.parentId) &&
              (this.dialogType === 'create' || this.spaceForm.spaceName !== this.originalSpaceName)) {
            this.$message.error('该空间下已存在同名空间');
            return;
          }

          if (this.dialogType === 'create') {
            await this.createSpace();
          } else if (this.dialogType === 'edit') {
            await this.updateSpace();
          }
          this.showSpaceDialog = false;
          this.$refs.spaceForm.resetFields();
        }
      });
    },
    async createSpace() {
      try {
        const response = await axios.post('/api/system/user/blog/space', null, {
          params: {
            spaceName: this.spaceForm.spaceName,
            parentId: this.spaceForm.parentId,
            visibilityScope: this.spaceForm.visibilityScope
          }
        });

        if (response.data.code === 200) {
          // 如果是在某个节点下创建，确保父节点展开
          if (this.spaceForm.parentId) {
            this.expandedKeys = [...new Set([...this.expandedKeys, this.spaceForm.parentId])];
          }
          await this.fetchSpaces();
          this.$message.success("创建空间成功");
        } else {
          this.$message.error(response.data.message || "创建空间失败");
        }
      } catch (error) {
        console.error("创建空间失败:", error);
        this.$message.error("创建空间失败");
      }
    },
    async updateSpace() {
      try {
        const response = await axios.put(`/api/system/user/blog/space/${this.spaceForm.spaceId}`, null, {
          params: {
            spaceName: this.spaceForm.spaceName,
            parentId: this.spaceForm.parentId,
            visibilityScope: this.spaceForm.visibilityScope
          }
        });
        
        if (response.data.code === 200) {
          this.fetchSpaces();
          this.$message.success("更新空间成功");
        } else {
          this.$message.error(response.data.message || "更新空间失败");
        }
      } catch (error) {
        console.error("更新空间失败:", error);
        this.$message.error("更新空间失败");
      }
    },
    getVisibilityIcon(scope) {
      const iconMap = {
        'public': 'fas fa-globe',
        'private': 'fas fa-lock',
        'group': 'fas fa-users'
      };
      return iconMap[scope] || 'fas fa-globe';
    },
    // 记录展开状态
    handleNodeExpand(data) {
      this.expandedKeys.push(data.spaceId);
    },
    // 记录收起状态
    handleNodeCollapse(data) {
      const index = this.expandedKeys.indexOf(data.spaceId);
      if (index > -1) {
        this.expandedKeys.splice(index, 1);
      }
    },
    // 获取所有父节点ID
    getParentIds(spaceData, targetId) {
      const parentIds = [];
      const findParent = (data, id) => {
        for (const item of data) {
          if (item.spaceId === id) {
            return true;
          }
          if (item.children && item.children.length) {
            if (findParent(item.children, id)) {
              parentIds.push(item.spaceId);
              return true;
            }
          }
        }
        return false;
      };
      findParent(spaceData, targetId);
      return parentIds;
    },
    // 检查同级空间是否有重名
    checkDuplicateName(name, parentId) {
      const findDuplicate = (spaces, pId) => {
        return spaces.some(space => {
          if (space.parentId === pId && space.spaceName === name) {
            return true;
          }
          if (space.children && space.children.length) {
            return findDuplicate(space.children, pId);
          }
          return false;
        });
      };
      return findDuplicate(this.spaceTreeData, parentId);
    },
    // 关闭对话框时重置表单
    handleDialogClose() {
      this.$refs.spaceForm.resetFields();
      this.originalSpaceName = '';
    },
    // 检查设备类型
    checkDevice() {
      this.isMobile = window.innerWidth <= 768;
    },
    // 切换移动端树的显示
    toggleMobileTree() {
      this.showMobileTree = !this.showMobileTree;
    }
  },
  mounted() {
    this.fetchSpaces();
    this.fetchBlogsBySpaceId();
    this.checkDevice();
    window.addEventListener('resize', this.checkDevice);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkDevice);
  }
};
</script>

<style scoped>
.blog-management {
  padding: 20px;
  min-height: 100vh;
  background: #f0f2f5;
}

/* 页面标题区域 */
.page-header {
  margin-bottom: 24px;
  padding: 20px;
  border-radius: 12px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h1 {
  font-size: 24px;
  color: #1a237e;
  margin: 0;
}

.create-btn {
  background: linear-gradient(135deg, #1a237e, #0d47a1);
  border: none;
  padding: 10px 20px;
}

.create-btn i {
  margin-right: 8px;
}

/* 主要内容区域 */
.main-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  min-height: calc(100vh - 180px);
}

/* 空间树部分 */
.space-tree-section {
  border-radius: 12px;
  overflow: hidden;
}

.tree-header {
  padding: 16px;
  background: linear-gradient(135deg, #1a237e, #0d47a1);
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tree-container {
  padding: 16px;
  height: calc(100vh - 280px);
  overflow-y: auto;
}

/* 自定义树样式 */
.custom-tree {
  background: transparent;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  transition: all 0.3s ease;
  border-radius: 4px;
  width: 100%;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-actions {
  display: none;
  gap: 8px;
}

.custom-tree-node:hover .node-actions {
  display: flex;
}

.node-actions i {
  font-size: 14px;
  color: #909399;
  cursor: pointer;
  padding: 2px;
}

.node-actions i:hover {
  color: #409EFF;
}

.node-actions .el-icon-delete:hover {
  color: #F56C6C;
}

.custom-tree-node.is-active {
  background: rgba(64, 158, 255, 0.1);
}

.custom-tree-node i.folder-active {
  color: #409EFF;
}

.space-count {
  background: rgba(26, 35, 126, 0.1);
  color: #1a237e;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-left: 4px;
}

/* 博客列表部分 */
.blog-list-section {
  border-radius: 12px;
  padding: 20px;
}

/* 博客详情展开 */
.blog-detail-expand {
  padding: 20px;
  display: flex;
  gap: 24px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.detail-item i {
  color: #1a237e;
}

/* 博客标题 */
.blog-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-title i {
  color: #1a237e;
}

/* 状态标签 */
.status-tag {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  display: inline-block;
}

.status-published {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.status-draft {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}

.status-deleted {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.status-pending {
  background: rgba(33, 150, 243, 0.1);
  color: #2196f3;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
}

/* 玻璃态效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(26, 35, 126, 0.2);
  border-radius: 3px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  
  .space-tree-section {
    display: none;
  }
}

/* 可见范围选择器样式 */
.visibility-select {
  width: 100%;
}

.el-select-dropdown__item i {
  margin-right: 8px;
  font-size: 14px;
}

/* 图标颜色 */
.fa-globe {
  color: #4CAF50;
}

.fa-lock {
  color: #F44336;
}

.fa-users {
  color: #2196F3;
}

/* 在树节点中显示可见范围图标 */
.custom-tree-node {
  .visibility-icon {
    margin-left: 8px;
    font-size: 12px;
    opacity: 0.6;
  }
}

/* 移动端样式 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tree-toggle-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #1a237e;
}

.tree-toggle-btn i {
  font-size: 16px;
}

.mobile-tree {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  height: 100vh;
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.show-mobile-tree {
  transform: translateX(0);
  display: block;
}

.tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, #1a237e, #0d47a1);
  color: white;
}

.tree-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.close-tree-btn {
  color: white;
  padding: 5px;
}

.close-tree-btn i {
  font-size: 20px;
}

/* 遮罩层 */
.tree-mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.show-mobile-tree + .tree-mask {
  display: block;
}

@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
  }

  .space-tree-section {
    display: none;
  }

  .mobile-tree {
    display: block;
  }

  .blog-list-section {
    margin-top: 20px;
  }
}
</style>
  